<template>
  <div class="myContract">
    <div class="form">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="房屋分类" style>
          <el-select v-model="value" placeholder="请选择" size="mini">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input v-model="contratNumber" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="logistics">
          <el-date-picker size="mini" value-format="yyyy-MM-dd" v-model="creattime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch" size="mini">查询</el-button>
          <el-button type="primary" @click="check" size="mini">重置</el-button>
          <el-button type="primary" @click="outfils" size="mini">导出</el-button>
          <!-- exportfils -->
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部合同" name="1">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="未生效合同" name="2">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已生效合同" name="3">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="待续签合同" name="4">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已到期合同" name="5">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已终止合同" name="6">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="contractNumber" label="合同编号"> </el-table-column>
          <el-table-column prop="buildingType" label="房屋分类">
            <template slot-scope="scope">
              <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
              <span v-if="scope.row.buildingType == 'exhibition'">展场</span>
              <span v-if="scope.row.buildingType == 'exclusive_shop'">形象店</span>
              <span v-if="scope.row.buildingType == 'Automobile 4S'">4S店</span>
              <span v-if="scope.row.buildingType == 'virtualhouse'">虚拟房产</span>
            </template>
          </el-table-column>
          <el-table-column prop="sumMoney" label="总金额(元)"></el-table-column>
          <el-table-column prop="createDate" label="创建时间"></el-table-column>
          <el-table-column prop="payType" label="支付方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == '1'">全款支付</span>
              <span v-if="scope.row.payType == '2'">分期支付</span>
            </template>
          </el-table-column>
          <el-table-column prop="contractStatus" label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractStatus == '0'">未签</span>
              <span v-if="scope.row.contractStatus == '1'">已签</span>
              <span v-if="scope.row.contractStatus == '2'">即将到期</span>
              <span v-if="scope.row.contractStatus == '3'">到期</span>
              <span v-if="scope.row.contractStatus == '4'">终止</span>
              <span v-if="scope.row.contractStatus == '5'">续签</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="viewOrder(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="Pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[2, 4, 6, 10]"
        :page-size.sync="size"
        :total="total"
        layout="prev, pager, next, sizes, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//时间格式化
Date.prototype.Format = function (fmt) {
  //author: meizz
  var o = {
    'M+': this.getMonth() + 1, //月份
    'd+': this.getDate(), //日
    'h+': this.getHours(), //小时
    'm+': this.getMinutes(), //分
    's+': this.getSeconds(), //秒
    'q+': Math.floor((this.getMonth() + 3) / 3), //季度
    S: this.getMilliseconds(), //毫秒
  }
  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
  for (var k in o) if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
  return fmt
}
import { getAlist, exportfils } from './index.js'
import { getItem } from '@/utils/store.js'
export default {
  data() {
    return {
      timestar: '',
      contratNumber: '',
      creattime: '', //创建时间
      options: [
        {
          value: 'complex_building', //级联选择配置表
          label: '综合楼',
        },
        {
          value: 'exhibition',
          label: '展场',
        },
        {
          value: 'exclusive_shop',
          label: '形象店',
        },
        {
          value: 'Automobile 4S',
          label: '4S店',
        },
        {
          value: 'virtualhouse',
          label: '虚拟房产',
        },
      ],
      value: '', //筛选的房屋类型
      total: 0,
      current: 1,
      size: 10,

      activeName: '1',
      tableData: null,
      multipleSelection: [],
    }
  },
  created() {
    this.getuserLists() // 获取全部合同列表
    this.companyId = getItem('USER_INFO').data.data.companyId
  },
  methods: {
    // 获取合同列表

    async getuserLists() {
      let datas = {
        current: this.current,
        size: this.size,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code == 0) {
          this.$message.success('获取合同列表成功')
          this.tableData = data.data.records
          console.log(data, '获取合同列表成功')
          this.total = data.data.total
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 获取生效合同
    async getuserListEffective() {
      let datas = {
        current: this.current,
        size: this.size,
        contractStatus: 1,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code === 0) {
          this.tableData = data.data.records
          this.total = data.data.total
          console.log(data, '获取生效合同合同列表成功')
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取未生效合同
    async getuserListDoesnot() {
      let datas = {
        current: this.current,
        size: this.size,
        contractStatus: 0,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code === 0) {
          this.tableData = data.data.records
          console.log(data, '获取未签合同列表成功')
          this.total = data.data.total
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取到期合同
    async getuserListDueto() {
      let datas = {
        current: this.current,
        size: this.size,
        contractStatus: 2,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code === 0) {
          this.tableData = data.data.records
          console.log(data, '获取到期合同列表成功')
          this.total = data.data.total
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 续签
    async getuserListTermination() {
      let datas = {
        current: this.current,
        size: this.size,
        contractStatus: 5,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code === 0) {
          this.tableData = data.data.records
          console.log(data, '获取终止合同合同列表成功')
          this.total = data.data.total
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取终止
    async getuserListTorenew() {
      let datas = {
        current: this.current,
        size: this.size,
        contractStatus: 4,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code === 0) {
          this.tableData = data.data.records
          this.total = data.data.total
          console.log(data, '获取续签')
        }
        console.log(data)
      } catch (error) {
        console.log(error)
      }
    },

    handleClick(tab) {
      if (tab.name == '1') {
        // 全部的合同
        this.getuserLists()

        this.tableData = null
      }
      if (tab.name == '2') {
        // 未生效合同
        this.tableData = null
        this.getuserListDoesnot()
      }
      if (tab.name == '3') {
        // 生效合同
        this.tableData = null
        this.getuserListEffective()
      }
      if (tab.name == '4') {
        // 获取续签合同
        this.tableData = null
        this.getuserListTermination()
      }
      if (tab.name == '5') {
        // 到期
        this.tableData = null
        this.getuserListDueto()
      }
      if (tab.name === '6') {
        // 终止
        this.tableData = null
        this.getuserListTorenew()
      }
    },

    onSubmit() {
      console.log(22)
    },
    async onSearch() {
      // 查询模块

      var timestar = this.creattime[0]
      var timeend = this.creattime[1]

      // var timestar = time.Format('yyyy-MM-dd') //创建开始时间
      // var timeend = time1.Format('yyyy-MM-dd') //创建结束时间

      let datas = {
        createStartDate: timestar,
        createEndDate: timeend,
        current: this.current,
        size: this.size,
        contractNumber: this.contratNumber,
        buildingType: this.value,
        companyId: getItem('USER_INFO').data.data.companyId,
      }
      try {
        const { data } = await getAlist(datas)
        if (data.code == 0) {
          console.log(data, '查询成功')

          this.$message.success('查询成功')

          this.tableData = data.data.records
          this.total = data.data.total
        } else {
          this.$message.error('查询失败')
        }
      } catch (error) {
        console.log(error)
      }
    },
    check() {
      // 重置
      (this.creattime = ''), //[new Date(), new Date()]系统当前时间
        (this.value = ''),
        (this.contratNumber = '')
      this.getuserLists()
    },
    outfils() {
      exportfils().then((res) => {
        console.log(res, '导出文件')
        let blob = res.data
        const fileReader = new FileReader()
        fileReader.readAsDataURL(blob)
        fileReader.onload = (event) => {
          let a = document.createElement('a')
          let _fileName = `合同.xls`
          a.download = _fileName
          a.href = event.target.result
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        }
      })
    },

    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    viewOrder(row) {
      this.$router.push({ path: '/myContractlist', query: { id: row.id } })
      //console.log(row)
    },
    handleSizeChange(val) {
      this.size = val
      this.getuserLists()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getuserLists()
    },
  },
}
</script>

<style lang="less" scoped>
.form {
  margin-bottom: 40px;
}
</style>
